<template>
  <el-dialog v-model="isDialogShow" :title="dialogTitle" width="500">
    <el-timeline>
      <el-timeline-item
          v-for="dayCheckStatus in attendanceRecord?.day_check_status"
          :key="dayCheckStatus.id"
          :timestamp="dayCheckStatus.actually_time" type="primary"
      >
        <p>
          <el-icon>
            <Check/>
          </el-icon>
          <span v-if="dayCheckStatus.plan_type !== undefined">{{ planType(dayCheckStatus.plan_type) }}</span>
          <el-tag v-if="dayCheckStatus.actually_status !== undefined" :type="tagType(dayCheckStatus.actually_status)">
            {{ status(dayCheckStatus.actually_status) }}
          </el-tag>
        </p>
        <p>
          <el-icon>
            <Timer/>
          </el-icon>
          <span>{{ dayCheckStatus.plan_time }}</span>
        </p>
        <p>
          <el-icon>
            <Location/>
          </el-icon>
          <span>{{ dayCheckStatus.actually_place }}</span>
        </p>
      </el-timeline-item>
    </el-timeline>

  </el-dialog>
</template>
<script lang="ts" setup>
import {computed} from "vue"
import {AttendanceRecord, AttendanceStatus, planType, status} from "@/api/types/attendance"
import {Check, Location, Timer} from "@element-plus/icons-vue"
import {timeFormatter2} from "@/utils/date";

const isDialogShow = defineModel<boolean>()

const props = defineProps<{ username?: string, attendanceRecord?: AttendanceRecord }>()
const dialogTitle = computed(() => {  
  if (props.attendanceRecord?.day !== undefined) {
    return `${props.username}在${timeFormatter2(props.attendanceRecord.day)}的考勤信息`
  }
})

function tagType(attendanceStatus: AttendanceStatus | number) {
  switch (attendanceStatus) {
    case 1:
    case 4:
      return "success"
    case 2:
    case 3:
      return "warning"
    case 5:
    case 6:
      return "danger"
  }
}
</script>
